<template>
    <div>
        <div v-if="currentPanel === jumpList">
            <el-card class="box-card" style="height: 850px">
                <div>
                    <!--搜索框-->
<!--                    <el-card class="box-card">-->
                        <div>
                            <el-form :inline="true" :model="queryData" class="user-search">
                                <el-form-item>
                                    <el-input v-model="queryData.formsTitle" placeholder="输入表单标题"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="search">查询</el-button>
                                </el-form-item>
                            </el-form>

                        </div>
<!--                    </el-card>-->
                    <div class="interspaceH"></div>
                    <!--表格-->
                    <div>
                        <el-card class="box-card" style="height: 690px">
                            <!--新建表单-->
                            <el-button type="primary" @click="addForm()">+ 新建表单</el-button>

                            <div class="interspaceH"></div>
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column prop="formsTitle" label="表单标题" width="">
                                </el-table-column>
                                <!--<el-table-column prop="formsType" label="表单类型" width="250">
                                </el-table-column>-->
                                <el-table-column prop="formsName" label="客户姓名" width="">
                                </el-table-column>
                                <el-table-column prop="formsPhone" label="电话" width="">
                                </el-table-column>
                                <el-table-column prop="formsAddress" label="地址" width="">
                                </el-table-column>
                                <el-table-column prop="formsNotes" label="备注">
                                </el-table-column>
                                <!-- <el-table-column prop="createTime" label="创建时间" width="">
                                </el-table-column> -->
                                <el-table-column prop="formsStatus" label="审核状态" width="">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="xiangqing(scope.$index, scope.row)">详情</el-button>
                                        <el-button type="text" @click="bianji(scope.$index, scope.row)">编辑</el-button>
                                        <el-button type="text" @click="shanchu(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!--分页-->
                            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                           :current-page="pagePagination.currentPage"
                                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                           layout="total, sizes, prev, pager, next"
                                           :total="pagePagination.total">
                            </el-pagination>
                        </el-card>
                    </div>
                </div>
            </el-card>
            <!--新建-->
            <div>
                <el-dialog title="新建表单" :visible.sync="add" width="30%" :close-on-click-modal="false">
                    <el-form label-width="120px" :model="createData" ref="addForm">
                        <el-form-item label="表单标题" prop="formsTitle">
                            <el-input size="small" v-model="createData.formsTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="客户名" prop="formsType">
                            <el-input size="small" v-model="createData.formsName"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="formsPhone">
                            <el-input size="small" v-model="createData.formsPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="formsAddress">
                            <el-input size="small" v-model="createData.formsAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="formsNotes">
                            <el-input size="small" v-model="createData.formsNotes"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="close">取消</el-button>
                        <el-button size="small" type="primary" class="title" @click="save">保存</el-button>
                    </div>
                </el-dialog>
            </div>
            <!--编辑-->
            <div>
                <el-dialog title="编辑表单" :visible.sync="edit" width="30%" :close-on-click-modal="false">
                    <el-form label-width="120px" :model="updateData" ref="editForm">
                        <el-form-item label="表单标题" prop="formsTitle">
                            <el-input size="small" v-model="updateData.formsTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="客户名" prop="formsType">
                            <el-input size="small" v-model="updateData.formsName"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="formsPhone">
                            <el-input size="small" v-model="updateData.formsPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="formsAddress">
                            <el-input size="small" v-model="updateData.formsAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="formsNotes">
                            <el-input size="small" v-model="updateData.formsNotes"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="close">取消</el-button>
                        <el-button size="small" type="primary" class="title" @click="update">保存</el-button>
                    </div>
                </el-dialog>
            </div>
            <!--详情-->
            <div>
                <el-dialog title="表单详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
                    <el-form label-width="120px" :model="viewData" ref="editForm" disabled>
                        <el-form-item label="表单标题" prop="formsTitle">
                            <el-input size="small" v-model="viewData.formsTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="客户名" prop="formsType">
                            <el-input size="small" v-model="viewData.formsName"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="formsPhone">
                            <el-input size="small" v-model="viewData.formsPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="formsAddress">
                            <el-input size="small" v-model="viewData.formsAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="formsNotes">
                            <el-input size="small" v-model="viewData.formsNotes"></el-input>
                        </el-form-item>
                        <el-form-item label="审核状态" prop="formsStatus">
                            <el-input size="small" v-model="viewData.formsStatus" disabled></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <!-- <el-button size="small" @click="currentHandler(jumpUpdate)">查看表单结构</el-button> -->
                        <el-button size="small" @click="close">返回</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <div v-if="currentPanel === jumpCreate">
            <SetForm @submit="formSubmit" :drawingList="[]"  @back="currentHandler(jumpList)"/>
        </div>
        <div v-if="currentPanel === jumpUpdate">
            <SetForm @submit="formModify" :drawingDefalut="formsMessage" @back="currentHandler(jumpList)"/>
        </div>
        <div v-if="currentPanel === jumpView">
            <SetForm :drawingDefalut="formsMessage" @back="currentHandler(jumpList)"/>
        </div>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination"
    // import SetForm from "@/components/index/Home";

    export default {
        // 注册组件
        components: {
            Pagination,
            // SetForm
        },
        data() {
            return {
                add: false,
                edit: false,
                view: false,
                currentPanel: 'list',
                queryData: {
                    formsTitle:"",
                },
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                //表格数据
                tableData: [],
                //新建数据
                createData: {},
                //编辑数据
                updateData: {},
                //详情数据
                viewData: {},

                jumpList: 'list',
                jumpCreate: 'add',
                jumpUpdate: 'update',
                jumpView: 'view',

                formsMessage: [],

                formsType: '2',
            }
        },
        mounted() {
            this. search();
        },
        methods: {
            //跳转
            currentHandler(type) {
                this.currentPanel = type
            },
            //新建表单
            formSubmit(formData,backParams) {
                this.createData.formsMessage = JSON.stringify(formData)
                this.currentHandler(this.jumpList)
            },
            //修改表单数据
            formModify(formData,backParams) {
                this.updateData.formsMessage = JSON.stringify(formData)
                this.currentHandler(this.jumpList)
            },
            addForm(){
                this.createData = {}
                this.add = true
            },
            bianji(index,row) {
                this.updateData = row;
                // this.formsMessage = [JSON.parse(this.updateData.formsMessage)];
                this.edit = true
            },
            xiangqing(index,row) {
                this.viewData = row;
                this.view = true
            },
            shanchu(index,row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$request('/forms/delete/'+row.formsId, '', 'POST').then((data) => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.search();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },

            save() {
                let that = this
                that.createData.formsType = this.formsType
                that.$request("/forms/add", that.createData, "POST").then((data) => {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    that.search();
                })
                this.close()
            },
            update(){
                let that = this
                that.$request("/forms/update", that.updateData, "POST").then((data) => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                })
                this.close()
            },

            close() {
                this.add = false;
                this.edit = false;
                this.view = false
            },

            search() {
                let that = this;
                let payload = {
                    formsTitle: this.queryData.formsTitle,
                    // formsType: this.formsType,
                    pageNum: this.pagePagination.currentPage,
                    pageSize: this.pagePagination.pageSize,
                }
                that.$request("/forms/getByTitle", payload, "POST").then((data) => {
                    that.tableData = data.data.data
                    that.pagePagination['total'] = data.data.total
                    that.pagePagination['pageSize'] = this.pagePagination.pageSize
                })
            },
            // 分页插件事件
            // queryDataHandle(page = 1, row = 10) {
            //     let that = this;
            //     let payload = {
            //         // formsType: this.formsType,
            //         pageNum: page,
            //         pageSize: row
            //     }
            //     that.$request("/forms/getByTitle", payload, "POST").then((data) => {
            //         // console.log(data.data)
            //         that.tableData = data.data.data
            //         that.pagePagination['total'] = data.data.total
            //         that.pagePagination['pageSize'] = row
            //     })
            // },
        }

    }
</script>

<style>
    .interspaceH {
        height: 30px;
    }
</style>
